{extend name="../index/public/mlay" /}
{block name="title"}我的返佣{/block}
{block name="style"}
<style>
	html {
		height: 100%;
	}

	body {
		height: 100%;
	}

	#app {
		height: 100%;
		/* background: #fff; */
	}

	.money {
		background-image: url(__TEM_STATIC__/img/my/mybag.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: bottom center;
		display: flex;
		height: 7rem;
		justify-content: space-between;
		padding: 0 2rem;
		padding-top: 1rem;
		font-size: 0.7rem;
	}

	.users {
		background: #fff;
		padding: 0.5rem 1rem;
		font-size: 0.7rem;
		border-radius: 10px;
		margin: 0.5rem 0.5rem;
	}
	.footer_show{
		text-align: center;
		font-size: 0.7rem;
		color: #939393;
		padding: 0.5rem 0;
	}
	.app_money{
		background: #ffffff;
		padding: 0.2rem 0.5rem;
		border-radius: 30px;
		margin-top: 1rem;
	}
	
</style>
<link rel="stylesheet" href="__TEM_STATIC__/css/public.css" />
{/block}
{block name="header"}
{block name="header"}
{/block}
{block name="container"}
<div id="app">
	<div>
		<div style="">
			<div class="money" style="">
				<div style="text-align: center;color: #fff;">
					<div style="font-size: 1rem;font-weight: bold;">
						￥{$vip.money_take}
					</div>
					<div>可提现余额</div>
				</div>
				<div style="text-align: center;color: #e5bf30;">
					<div @click="app_money" class="app_money">申请提现</div>
				</div>
			</div>
		</div>
		<div style="margin-top: -2rem;color: #343434;font-size: 0.7rem;display: flex;justify-content: space-between;padding: 0 2rem;" class="">
			<span>今日￥{$vip.today}</span>
			<span>本月￥{$vip.month}</span>
			<span>累计￥{$vip.all}</span>
		</div>
		<div v-for="(item,index) in Data" class="users">
			<p v-cloak>
			<div class="flex ju_sb">
				<span v-cloak>{{item.from}}  <font color="#006600">[{{item.pluser}}]</font></span>
				<span v-cloak style="color: rgb(229, 191, 48)">{{item.model}}：{{item.money}}元</span>
				<!-- <span  v-cloak>{{item.type}}</span> -->
			</div>
			<div style="padding: 0.5rem 0;" class="flex ju_sb">
				<!-- <span v-cloak></span> -->
				<span v-cloak><font v-if="item.model != '申请提现'">{{item.pay}}元×{{item.pre}}</font></span>
				<span style="color: #acacac;"v-cloak>{{item.time}}</span>
				<!-- <span v-cloak>返佣</span> -->
			</div>
			<div class="flex ju_sb">
				
			</div>	
			</p>
		</div>
		<div v-if="show" class="footer_show">
			没有更多了
		</div>
	</div>
</div>
{/block}
{block name="copyright"}{/block}
{block name="script"}
<!-- 引入vue.js文件使用vue开发 -->
<script src="__TEM_STATIC__/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data() {
			return {
				list: [
					{
						img: '__TEM_STATIC__/img/my_promotion/my_user.png',
						text: '我的用户'
					}, {
						img: '__TEM_STATIC__/img/my_promotion/the_trade_order.png',
						text: '交易订单'
					},
				],
				Data: [],
				page: 1, //页数
				last_page: '', //总页数
				isLoadding: false,
				show: false
			}
		},
		//计算属性	
		computed: {},
		//监听属性
		watch: {},
		//钩子函数	
		created() {
			this.shuju()
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理

		},
		methods: {
			handleScroll() {
				//变量scrollTop是滚动条滚动时，距离顶部的距离
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				//变量windowHeight是可视区的高度
				var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
				//变量scrollHeight是滚动条的总高度
				var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
				//滚动条到底部的条件
				if (scrollTop + windowHeight >= scrollHeight && vm.isLoadding == false) {
					//加载数据的函数
					console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
					if (this.page < this.last_page) {
						this.page++
						this.shuju();
					}
				}
			},
			shuju: function() {
				let that = this
				var loading = weui.loading('loading', {
					content: '正在载入'
				});
				$.post("", {
					page: that.page
				}, function(res) {
					vm.last_page = res.data.last_page //最后页数	
					if(vm.page > 1) {
						vm.Data = vm.Data.concat(res.data.items);
						vm.show = true
						console.log(vm.Data);
					}else {
						// console.log(res);
						vm.Data = res.data.items
					}
					loading.hide();
					
				});
			},
			app_money() {
				window.location.href = "{:real_url('user/vip/take')}"
			}

		}
	})
</script>
{/block}
